{extend name="../../../view/public/base" /}
{block name="css"}
<style>
    /*微信样式*/
    .wechat_box{display: flex;display: -webkit-flex;margin-top:10px}
    .wechat_lists{flex:1;padding-left: 10px;}
    .wechat {position: relative;min-width: 320px;width: 320px;height:500px;background:#F3F3F3 url(/static/manage/images/wechat_bar.png) no-repeat 0 0;background-position: 0 0;border: 1px solid #e7e7eb;}
    .wechat .wechat_title {color: #fff;text-align: center;padding-top: 32px;font-size: 15px;width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;margin: 0 30px;}
    .wechat .sync{width: 110px;margin:20px auto;}
    .wechat .wechat_menu {position: absolute;bottom: 0;left: 0;right: 0;border-top: 1px solid #f1f1f1;background: transparent url(/static/manage/images/wechat_bottom.png) no-repeat 0 0;background-position: 0 0;background-repeat: no-repeat;padding-left: 43px;}
    .wechat .wechat_menu .pre_menu_item {line-height: 50px;height: 50px;background: #FFF;display:flex;display: -webkit-flex}
    .wechat .wechat_menu .pre_menu_item li {position: relative;display: block;flex: 1;-webkit-box-flex: 1;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;color: #616161;text-decoration: none;text-align: center;border-left: 1px solid #f1f1f1;}
    .wechat .wechat_menu .pre_menu_item li a{display: block}
    .wechat .wechat_menu .pre_menu_item li .sub-pre-menu-box {z-index: 100;;position:absolute;width:100%;bottom: 50px;background-color: #fff;box-shadow: 0px -1px 2px rgba(150, 150, 150, 0.28);}
    .wechat .wechat_menu .pre_menu_item .sub-pre-menu-box span{display: block;border-bottom: 1px #f1f1f1 solid}
</style>
<link rel="stylesheet" href="/layui/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
{/block}
{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
            <div class="layui-card" style="height: 1100px">
                <div class="layui-card-header"><i class="fa fa-weixin" aria-hidden="true" style="color:#51C332;"></i>公众号菜单</div>
                <div class="layui-card-body">
                    <blockquote class="layui-elem-quote layui-text" style="border-left: 5px solid #01AAED;">
                        友情提示:<br>
                        1、你要使用公众号管理功能，必须在应用配置中正确配置您的公众号信息。
                    </blockquote>

                    <div class="wechat_box layui-row layui-col-space5">
                        <div class="wechat layui-col-md4">
                            <div class="wechat_title">菜单预览</div>
                            <div class="wechat_menu">
                                <ul class="pre_menu_item">
                                </ul>
                            </div>
                        </div>

                        <div class="wechat_lists layui-col-md8">
                            <blockquote class="layui-elem-quote layui-text" style="border-left: 5px solid #01AAED;">
                                友情提示:<br>
                                1、你要使用公众号管理功能，必须在应用配置中正确配置您的公众号信息。
                            </blockquote>
                            <table id="list" lay-filter="listFilter"></table>

                            <!--工具栏-->
                            <script type="text/html" id="listToolbar">
                                <a class="layui-btn layui-btn-sm layui-bg-black" lay-event="refresh" title="刷新"><i class="layui-icon layui-icon-refresh" style="font-size: 8px !important;"></i> </a>
                                {Auth:node name='/manage/member.official/add'}
                                <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add" title="新增">添加菜单</a>
                                {/Auth:node}
                                {Auth:node name='/manage/member.official/sync'}
                                <a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="sync" title="同步">推送到微信端</a>
                                {/Auth:node}
                            </script>

                            <!--链接类型:view=网页类型,miniprogram=小程序类型,click=点击类型-->
                            <script type="text/html" id="types">
                                {{# if (d.types == 'view') { }}
                                <span class="layui-badge">打开网页</span>
                                {{# } else if(d.types == 'miniprogram') { }}
                                <span class="layui-badge">打开小程序</span>
                                {{# } else if(d.types == 'click') { }}
                                <span class="layui-badge">点击类型</span>
                                {{# } else if(d.types == 'scancode_push') { }}
                                <span class="layui-badge">扫码</span>
                                {{# } else if(d.types == 'scancode_waitmsg') { }}
                                <span class="layui-badge">扫码(等待信息)</span>
                                {{# } else if(d.types == 'location_select') { }}
                                <span class="layui-badge">发送位置</span>
                                {{# } else if(d.types == 'pic_sysphoto') { }}
                                <span class="layui-badge">系统拍照发图</span>
                                {{# } else if(d.types == 'pic_photo_or_album') { }}
                                <span class="layui-badge">拍照或者相册发图</span>
                                {{# } else if(d.types == 'pic_weixin') { }}
                                <span class="layui-badge">微信相册发图</span>
                                {{# } else { }}
                                <span class="layui-badge">{{d.types}}</span>
                                {{# } }}
                            </script>
                            <!--更新时间时间-->
                            <script type="text/html" id="update_time">
                                {{ formatDate(d.update_time) }}
                            </script>


                            <!--状态开关-->
                            <script type="text/html" id="listBar">
                                {Auth:node name='/manage/member.official/edit'}
                                <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
                                {/Auth:node}
                                {Auth:node name='/manage/member.official/del'}
                                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
                                {/Auth:node}
                            </script>
                        </div>

                    </div>
                </div>
                </div>
</div>

{/block}

{block name="js"}


<script>
    var form, table;

    layui.use([ 'form', 'table'], function () {
        form = layui.form;
        table = layui.table;
        //执行列表
        table.render({
            elem: '#list',
            url: "{:Url('index')}?miniapp_id={$member_miniapp_id}",
            response: {
                statusCode: 200,  //规定成功的状态码，默认：0
            },
            parseData: function (res) { //res 即为原始返回的数据
                //刷新菜单
                refreshMenu(res.data.data.list);

                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.data.total, //解析数据长度
                    "data": res.data.data.list //解析数据列表
                };
            },
            toolbar: '#listToolbar',
            cols: [[
                {field: 'sort', title: '排序', align: 'center', width: 60, fixed: "left"},
                // {field: 'id', title: 'ID', align: 'center', width: 60, fixed: "left"},
                {field: 'name', title: '菜单名称', align: 'left', width: 150, templet: function (d) {
                        if(d.parent_id != 0) return '&nbsp;└─' + d.name;
                        return d.name;
                    }},
                {field: 'types', title: '菜单类型', align: 'center', width: 130, templet: '#types'},
                {field: 'url', title: '链接', align: 'center', minWidth: 120},
                {field: 'pagepath', title: '小程序页面', align: 'center', minWidth: 90},
                {field: 'key', title: '回复规则key', align: 'center', width: 130},
                {field: 'update_time', title: '更新时间', align: 'center', width: 160, templet: '#update_time'},
                {title: '操作', toolbar: '#listBar', align: 'center', fixed: "right", width: 140}
            ]],
            // limits: [10, 15, 20, 25, 50, 100],
            // limit: 10,
            // page: true
        });

        //监听表格头部工具栏事件
        table.on('toolbar(listFilter)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'refresh':
                    reload();
                    break;
                case 'add':
                    layer.open({
                        title: '添加菜单',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        area: ['50%', '90%'],
                        content: "{:Url('add')}?miniapp_id={$member_miniapp_id}",
                    });
                    break;
                case 'sync':
                    sync();
                    break;
            }
        });

        //监听工具条
        table.on('tool(listFilter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            switch (layEvent) {
                case 'edit':
                    layer.open({
                        title: '编辑',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        area: ['50%', '90%'],
                        content: "{:Url('edit')}?miniapp_id={$member_miniapp_id}&id=" + data.id,
                    });
                    break;
                case 'del':
                    del(obj.data.id);
                    break;
            }
        });
    });

    //删除
    function del(ids) {
        layer.confirm('确认删除?', function (index) {
            //ajax调用后台接口
            bwajax.post("{:Url('del')}?miniapp_id={$member_miniapp_id}&ids=" + ids)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('删除成功', {icon: 1});
                        reload();
                    } else {
                        layer.msg(response.data.msg, {icon: 2});
                    }
                });
            layer.close(index);
        });
    }

    //表格重载
    function reload(page) {
        var where = getWhere();//获取搜索条件

        var page_now = $(".layui-laypage-em").next().html(); //当前页码值
        var page_to = page ? page : page_now;

        table.reload('list', {
            where: where, //设定异步数据接口的额外参数
            page: {curr: page_to}//设置页数
        });
    }

    //刷新菜单区域
    function refreshMenu(menu){
        var htmlStr = '';
        menu.forEach(v=>{
            if(v.parent_id === 0){
                htmlStr += "                                    <li><a> " + v.name + "</a>\n" +
                    "                                       <div class=\"sub-pre-menu-box\">\n";
                menu.forEach(val=>{
                    if(val.parent_id === v.id){
                        htmlStr += "                                        <span>" + val.name + "</span>\n"
                    }
                });
                htmlStr += "                                       </div>\n" +
                "                                       </li>\n";
            }
            $(".pre_menu_item").html(htmlStr);
        });
    }

    //同步菜单至微信
    function sync() {
        layer.confirm('同步菜单至微信?', function (index) {
            //ajax调用后台接口
            bwajax.post("{:Url('sync')}?miniapp_id={$member_miniapp_id}")
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('操作成功', {icon: 1});
                        reload();
                    } else {
                        layer.msg(response.data.msg, {icon: 2});
                    }
                });
            layer.close(index);
        });
    }
</script>
{/block}